<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/12/4
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>保洁阿姨</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height:100px;
            line-height: 100px;

        }
        .layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
            width: 20px;
            height: 50px;
            margin-top:10px;

        }
        td {
            text-align: center;
        }
        #test img{
            width: 100px;
            height: 100%;
        }
        #test1{
            margin: auto;
        }
        #test1 img {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div><img src="http://www.hnbsd.cn/uploads/160418/1-16041QG523201.png"></div>
        <div><img src="http://www.hnbsd.cn/uploads/160420/1-160420112920132.png"></div>
        <div><img src="http://www.hnbsd.cn/uploads/160420/1-160420133515131.png"></div>
        <div><img
                src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2148831039,365272043&fm=26&gp=0.jpg">
        </div>
        <div><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606713094289&di=a8a00d11ca25cefd7eb78c3e74f6cf28&imgtype=0&src=http%3A%2F%2Ffiles.b2b.cn%2Fproduct%2FProductImages%2F2013_05%2F22%2F170%2F22170522184.jpg">
        </div>
        <div><img
                src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1743390559,1063499136&fm=15&gp=0.jpg">
        </div>
        <div><img
                src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4176994643,764470338&fm=15&gp=0.jpg">
        </div>
    </div>
</div>
<table class="layui-hide" id="test"></table>

<script>
    layui.use(['table', 'form', 'layer', 'carousel'], function(){
        var table = layui.table;
        var carousel = layui.carousel;
        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/chuku/yuS'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: 'ID', sort: true}
                ,{field:'name', title: '姓名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'imgpath', title: '照片',templet: function (res) {
                        return '<img src="' + res.imgpath + '">'}}
                ,{field:'count', title: '剩余保洁物数（套）'}
            ]]
        });
        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test1'
            , width: '400px' //设置容器宽度
            , height: '120px'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            //,anim: 'updown' //切换动画方式
        });

    });
</script>
</body>
</html>
